<template>
<el-container>
  <el-aside width="80%">
            <div>
                <div class="doctor_seacher">
                        角色名称:<el-input v-model="search_name" placeholder="请输角色名" style="width: 180px"></el-input>
                    
                        <el-button type="primary" @click="searche" icon="el-icon-search" style="margin-left:20px">搜索</el-button>
                    </div>
                    <el-divider><i class="el-icon-s-promotion"></i></el-divider>
            <el-table
                :data="tableData" 
                border 
                style="width: 100%" 
                max-height="320">
                :default-sort = "{prop: 'id', order: 'descending'}"
                >
                <el-table-column
                    type="index">
                </el-table-column>
                <el-table-column
                prop="id"
                label="ID"
                sortable
                width="120">
                </el-table-column>
                <el-table-column
                prop="name"
                label="角色名称"
                width="160">
                </el-table-column>
                <el-table-column
                    label="持有的权限"
                    >
                    <template slot-scope="scope">
                         <el-popover
                            placement="right"
                            width="400"
                            trigger="click"
                            >
                            <el-table :data="gridData"  height="350" border>
                                <el-table-column width="50" property="id" label="ID"></el-table-column>
                                <el-table-column width="100" property="name" label="名称"></el-table-column>
                                <el-table-column width="100" property="sign" label="标志"></el-table-column>
                                <el-table-column width="100" property="link" label="链接"></el-table-column>
                                <el-table-column width="100" label="状态" >
                                    <template slot-scope="scope">
                                        <i class="el-icon-s-opportunity"></i>
                                        <span style="margin-left: 10px">{{ scope.row.status=='y'?'可用':'禁用' }}</span>
                                    </template>  
                                </el-table-column>
                            </el-table>
                             <el-button slot="reference" @click="look(scope.row)">查看权限</el-button>
                            </el-popover>
                </template>  
                </el-table-column>
                <el-table-column
                    label="状态"
                    >
                    <template slot-scope="scope">
                    <i class="el-icon-s-opportunity"></i>
                    <span style="margin-left: 10px">{{ scope.row.status=='y'?'可用':'禁用' }}</span>
                </template>  
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="160">
                    <template slot-scope="scope">
                        <el-button
                        size="mini"
                        type="primary" 
                        round
                        @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
            
                            <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="currentPage"
                                :page-sizes="[2, 4, 6, 8]"
                                :page-size="4"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="totals">
                            </el-pagination>
                </div>
            </div>
        </el-aside>
        <el-main>
        <el-button type="primary" @click="add" circle style="width:100%;height:100%"><i class="el-icon-circle-plus"></i>添加角色</el-button>
        <el-drawer
                :title="opr == 'add'?'增加角色':'修改角色'"
                :before-close="handleClose"
                :visible.sync="dialog"
                direction="rtl"
                custom-class="demo-drawer"
                ref="drawer"
                size="50%"
            >
            <div class="demo-drawer__content" align="center" >
                <el-form :model="form" >
                    <el-form-item label="角色名称" :label-width="formLabelWidth">
                        <el-input v-model="form.name" autocomplete="off" style="width:70%"></el-input>
                    </el-form-item>
                    <el-form-item label="状态" :label-width="formLabelWidth">
                        <select    v-model="form.status" >
                                    <option   value="y">正常</option>
                                    <option   value="n">禁用</option></select>   
                    </el-form-item>
                    <el-form-item label="权限" :label-width="formLabelWidth">
                    <el-checkbox-group v-model="form.perm_ids">
                    <el-checkbox v-for="perm in perms" :key="perm.id" :label="perm.id"
                        >{{perm.name}}</el-checkbox>
                    </el-checkbox-group>
                    </el-form-item>  
                </el-form>
                    <div class="demo-drawer__footer">
                    <el-button @click="$refs.drawer.closeDrawer()">取 消</el-button>
                    <el-button type="primary" @click="submit()" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
                    </div>
            </div>
        </el-drawer>
        </el-main>
    </el-container>
</template>
<script>
const axios = require("axios");
  export default {
    data() {
      return {
          gridData: [],
        opr:'',
        tableData: [],
        search_name: "",
        currentPage: 1,
        pagesize:4,
        totals:0,
        dialog: false,
        loading: false,
        perms: [],
        form: {
            id: '0',
            name: '',
            status:'y',
            perm_ids: []   
      },
      formLabelWidth: '80px',
      timer: null,
      }
    },
    methods: {
        look(row){
            //显示权限信息
            //根据角色ID查询权限
            axios.get("http://192.168.6.189:8080/hpl-perm/getPermByRoleId?id="+row.id).then((r) => {
                if(r.data.code == 200){                    
                   this.gridData =  r.data.data  
                }else if(r.data.code === 403){
                                        this.$notify({
                                            title: '警告',
                                            message: r.data.msg,
                                            type: 'warning'
                                            }); 
                                    }else if(r.data.code === 500){
                                        this.$notify({
                                            title: '警告',
                                            message: r.data.msg,
                                            type: 'warning'
                                            }); 
                                    }else{
                                this.$notify({
                                    title: '警告',
                                    message: '系统繁忙！',
                                    type: 'warning'
                                    }); 
                            } 
            })
        },
        add(){
            this.opr='add';
            axios.get("http://192.168.6.189:8080/hpl-perm/list").then((r) => {
                if(r.data.code == 200){
                     this.perms = r.data.data;
                     this.dialog=true;
                     
                }else if(r.data.code === 403){
                                        this.$notify({
                                            title: '警告',
                                            message: r.data.msg,
                                            type: 'warning'
                                            }); 
                                    }else if(r.data.code === 500){
                                        this.$notify({
                                            title: '警告',
                                            message: r.data.msg,
                                            type: 'warning'
                                            }); 
                                    }else{
                                this.$notify({
                                    title: '警告',
                                    message: '系统繁忙！',
                                    type: 'warning'
                                    }); 
                            } 
            })
            
        },
        handleEdit(row) {
            this.add();
            this.opr='update';
            this.form.name=row.name;
            this.form.status=row.status;
            this.form.id=row.id;
            //根据角色ID查询权限
            axios.get("http://192.168.6.189:8080/hpl-perm/getPermByRoleId?id="+row.id).then((r) => {
                if(r.data.code == 200){                    
                    r.data.data.forEach(p => {
                        this.form.perm_ids.push(p.id)
                    });                    
                }else if(r.data.code === 403){
                                        this.$notify({
                                            title: '警告',
                                            message: r.data.msg,
                                            type: 'warning'
                                            }); 
                                    }else if(r.data.code === 500){
                                        this.$notify({
                                            title: '警告',
                                            message: r.data.msg,
                                            type: 'warning'
                                            }); 
                                    }else{
                                this.$notify({
                                    title: '警告',
                                    message: '系统繁忙！',
                                    type: 'warning'
                                    }); 
                            } 
            })
            
        },
        handleDelete(row) {
            if(confirm("你确定要删除吗？")){
                axios.get("http://192.168.6.189:8080/hpl-role/del?id="+row.id).then((r) => {
                            if(r.data.code == 200){
                                this.$message({
                                message: '删除成功，这是一条成功消息',
                                    type: 'success'
                                    });	
                                    this.searche(); 
                            }else if(r.data.code === 403){
                                        this.$notify({
                                            title: '警告',
                                            message: r.data.msg,
                                            type: 'warning'
                                            }); 
                                    }else if(r.data.code === 500){
                                        this.$notify({
                                            title: '警告',
                                            message: r.data.msg,
                                            type: 'warning'
                                            }); 
                                    }else{
                                this.$notify({
                                    title: '警告',
                                    message: '系统繁忙！',
                                    type: 'warning'
                                    }); 
                            } 
                        })
            }
        },
        handleClose(done) {
        this.$confirm('确认关闭？')
          .then(() => {
            this.cancelForm();
            done();
          })
          .catch(() => {});
        },
        submit() {
            if (this.loading) {
                return;
            }
            this.$confirm('确定要提交表单吗？')
                .then(()=> {
                this.loading = true;
                axios.post("http://192.168.6.189:8080/hpl-role/"+this.opr,this.form).then(r=>{
                       if(r.data.code === 200){
                                this.$message({
                                message: '添加成功，这是一条成功消息',
                                    type: 'success'
                                    });	
                                    this.searche();
                                    this.cancelForm();                                  
                            }else if(r.data.code === 403){
                                this.$notify({
                                    title: '警告',
                                    message: r.data.msg,
                                    type: 'warning'
                                    }); 
                            }else{
                                this.$notify({
                                    title: '警告',
                                    message: '系统繁忙！',
                                    type: 'warning'
                                    }); 
                            } 
                    })
                this.timer = setTimeout(() => {
                    // 动画关闭需要一定的时间
                    setTimeout(() => {
                    this.loading = false;
                    }, 400);
                }, 2000);
                })
                .catch();
        },
        cancelForm() {
            this.loading = false;
            this.dialog = false;
            clearTimeout(this.timer);
            this.form.perm_ids=[];
            this.form.status='y';
            this.form.name='';
            this.form.id='0';
        },
        handleSizeChange(val) {
                this.pagesize=val;
                this.searche();
            },
        handleCurrentChange(val) {
                this.currentPage=val;
                this.searche();
            },
       searche(){
          axios.get("http://192.168.6.189:8080/hpl-role/list?currentPage="
            +this.currentPage+"&pagesize="+this.pagesize+"&name="+this.search_name).then((r) => {
                if(r.data.code == 200){
                     this.tableData = r.data.data.records;
                        this.totals= r.data.data.total;
                }else if(r.data.code === 403){
                                        this.$notify({
                                            title: '警告',
                                            message: r.data.msg,
                                            type: 'warning'
                                            }); 
                                    }else if(r.data.code === 500){
                                        this.$notify({
                                            title: '警告',
                                            message: r.data.msg,
                                            type: 'warning'
                                            }); 
                                    }else if(r.data.code === 500){
                                        this.$notify({
                                            title: '警告',
                                            message: r.data.msg,
                                            type: 'warning'
                                            }); 
                                    }else{
                                this.$notify({
                                    title: '警告',
                                    message: '系统繁忙！',
                                    type: 'warning'
                                    }); 
                            } 
            })
      }
    },
    mounted(){
            this.searche();
    }

  }
</script>